<div class="clearfix">
	<div class="col-md-5 p-xs">
		<div class="panel panel-default" id="side1">
			<div class="panel-heading text-center">全年节能</div>
			<div class="panel-body">
				<div class="col-xs-6 text-center">
					<div class="energy col-xs-12 energy1" style="height:180px"></div>
					<div class="col-xs-12">减少支出<br><span class="unit">￥5万</span></div>
				</div>
				<div class="col-xs-6 text-center">
					<div class="energy col-xs-12 energy2" style="height:180px"></div>
					<div class="col-xs-12">减少排放<br><span class="unit">6407mm</span></div>
				</div>
			</div>
		</div>
		<div class="panel panel-default" id="side2">
			<div class="panel-heading text-center">全年耗能</div>
			<div class="panel-body">
				<div class="col-xs-6 text-center">
					<div class="energy col-xs-12 energy3" style="height:180px"></div>
					<div class="col-xs-12">增加支出<br><span class="unit">￥8万</span></div>
				</div>
				<div class="col-xs-6 text-center">
					<div class="energy col-xs-12 energy2" style="height:180px"></div>
					<div class="col-xs-12">增加排放<br><span class="unit">8000mm</span></div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-7 p-xs">
		<div class="panel panel-default" id="side">
			<div class="panel-heading text-center">全年节能</div>
			<div class="panel-body">
				<div id="energy31" style="height:440px"></div>
				<div id="energy32" style="height:440px"></div>
				<div class="row text-center">
					<div class="col-xs-4">
						<div id="energy331" style="height:0px"></div>
						暖通空调电耗<br><span class="unit">10.1万 KWH</span>
					</div>
					<div class="col-xs-4">
						<div id="energy332" style="height:0px"></div>
						动力设备电耗<br><span class="unit">56.4万 KWH</span>
					</div>
					<div class="col-xs-4">
						<div id="energy333" style="height:0px"></div>
						公共照明及<br>其他电耗<br><span class="unit">20.6万 KWH</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--全年节能  -->
<script type="text/javascript">
	//设置3个模块的高度
	var side = document.body.clientHeight - 100;
	var side1 = side * 0.5 - 10;
	var side2 = side * 0.5 - 10;
	//双倍部分的高度
	$("#side").height(side);
	//双倍部分内部图表容器大小
	$("#energy31").height((side - 60) * 0.4);
	$("#energy32").height((side - 60) * 0.2);
	$("#energy331, #energy332, #energy333").height((side - 60) * 0.3);
	//单倍部分1的高度及图表高度
	$("#side1").height(side1);
	$(".energy").height(side1-120);
	//单倍部分2的高度及图表高度
	$("#side2").height(side2);

	// 路径配置
	require.config({
		paths: {
			echarts: '/assets/echarts'
		}
	});
	
	// 全年节能与全年耗能环形图
	require(
		[
		'echarts',
		'echarts/chart/pie'
		],
		function (pie) {
		// var myChart = ec.init(document.getElementById('energy1')); 
		$(".energy").each(function(){
		var myEnergy = pie.init($(this).get(0));   
		var labelTop = {
			normal : {
				label : {
					show : true,
					position : 'center',
					formatter : '{b}',
					textStyle: {
						baseline : 'top'
					}
				},
				labelLine : {
					show : false
				}
			}
		};
		var labelFromatter = {
			normal : {
				label : {
					formatter : function (params){
						return 100 - params.value + '%'
					},
					textStyle: {
						baseline : 'bottom',
						fontSize: 30,
					}
				}
			},
		}
		var labelBottom = {
			normal : {
				color: '#ccc',
				label : {
					show : false,
					position : 'center'
				},
				labelLine : {
					show : false
				}
			},
			emphasis: {
				color: 'rgba(0,0,0,0)'
			}
		};
		var radius = ['85%', '90%'];
		var  option = {

			series : [
			{
				type : 'pie',
				center : ['50%', '50%'],
				radius : radius,
				x: '30%', // for funnel
				itemStyle : labelFromatter,
				data : [
				{name:'other', value:70, itemStyle : labelBottom},
				{name:'', value:30,itemStyle : labelTop}
				]
			},
			]
		};
		myEnergy.setOption(option); 
		});
		}
	);

	
	// 右侧全年节能分支结构
	require(
		[
		'echarts',
		'echarts/chart/tree'
		],
		function (ec) {
		var myChart = ec.init(document.getElementById('energy32')); 
		
		option = {
			tooltip : {
				trigger: 'item',
				formatter: "{b}: {c}"
			},
			calculable : false,

			series : [
			{
				name:'树图',
				type:'tree',
				orient: 'vertical',  // vertical horizontal
				rootLocation: {x: '50%', y: 0}, // 根节点位置  {x: 'center',y: 10}
				nodePadding: 20,
				symbol: 'circle',
				symbolSize: 40,
				itemStyle: {
				normal: {
					label: {
						show: true,
						position: 'inside',
						textStyle: {
							color: '#cc9999',
							fontSize: 15,
							fontWeight:  'bolder'
						}
					},
					lineStyle: {
						color: '#D5D5D5',
						width: 2,
						type: 'dashed' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
					}
				},
				emphasis: {
					label: {
						show: true
					}
				}
			},
			data: [
			{
				symbolSize: [90, 70],
				symbol: 'image:',
				itemStyle: {
					normal: {
						label: {
							show: false
						}
					}
				},
				children: [
				{
					value: 4,
					symbol: 'image:',
					itemStyle: {
						normal: {
							label: {
								show: false
							}
						}
					},
					symbolSize: [260, 40],
				},
				{
					symbol: 'image:',
					symbolSize: [260, 40],
					itemStyle: {
						normal: {
							label: {
								show: false
							}

						}
					},
					value: 4
				},
				{
					symbol: 'image:',
					symbolSize: [260, 40],
					itemStyle: {
						normal: {
							label: {
								show: false
							}

						}
					},
					value: 2
				},
				]
			}
			]
		}
		]
	};
		// 为echarts对象加载数据 
		myChart.setOption(option); 
	}
	);

	// 全年节能饼图
	require(
		[
			'echarts',
			'echarts/chart/pie'
		],
		function (pie) {
			var energy31 = pie.init(document.getElementById('energy31')); 
			var option = {
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series : [
					{
						name:'电耗来源',
						type:'pie',
						radius : '80%',
						center: ['50%', '55%'],
						data:[
							{value:20, name:'公共照明及其他电耗'},
							{value:40, name:'动力设备电耗'},
							{value:40, name:'暖通空调电耗'}
						]
					}
				]				
	        	};
			energy31.setOption(option); 
		}
	);

	// 全年节能环形图（1）
	require(
		[
			'echarts',
			'echarts/chart/pie'
		],
		function (pie) {
			var energy33 = pie.init(document.getElementById('energy331')); 
			var labelTop = {
				normal : {
					color: '#DA70D6',
					label : {
						show : false,
						position : 'center',
						formatter : '{b}',
						textStyle: {
							baseline : 'top',
							color: '#7e7e7e',
							fontSize: 10
						}
					},
					labelLine : {
						show : false
					}
				}
			};
			var labelFromatter = {
				normal : {
					label : {
						formatter : function (params){
							return 100 - params.value + '%'
						},
						textStyle: {
							baseline : 'bottom',
							fontSize: 30,
							color: '#676A6C'
						}
					}
				},
			}
			var labelBottom = {
				normal : {
					color: '#eee',
					label : {
						show : true,
						position : 'center'
					},
					labelLine : {
						show : false
					}
				},
				emphasis: {
					color: 'rgba(0,0,0,0)'
				}
			};
			var radius = ['70%', '75%'];
			var option = {
				legend: {
					x : 'center',
					y : 'center',
					data:[]
				},
				series : [
					{
						type : 'pie',
						center : ['50%', '50%'],
						radius : radius,
						x:'60%', // for funnel
						itemStyle : labelFromatter,
						data : [
							{name:'other', value:60, itemStyle : labelBottom},
							{name:'暖通空调电耗', value:40,itemStyle : labelTop}
	            				]
	          			}
	        		]
	        	};
			energy33.setOption(option); 
		}
	);
	// 全年节能环形图（2）
	require(
		[
			'echarts',
			'echarts/chart/pie'
		],
		function (pie) {
			var energy33 = pie.init(document.getElementById('energy332')); 
			var labelTop = {
				normal : {
					color: '#87CEFA',
					label : {
						show : false,
						position : 'center',
						formatter : '{b}',
						textStyle: {
							baseline : 'top',
							color: '#7e7e7e',
							fontSize: 10
						}
					},
					labelLine : {
						show : false
					}
				}
			};
			var labelFromatter = {
				normal : {
					label : {
						formatter : function (params){
							return 100 - params.value + '%'
						},
						textStyle: {
							baseline : 'bottom',
							fontSize: 30,
							color: '#676A6C'
						}
					}
				},
			}
			var labelBottom = {
				normal : {
					color: '#eee',
					label : {
						show : true,
						position : 'center'
					},
					labelLine : {
						show : false
					}
				},
				emphasis: {
					color: 'rgba(0,0,0,0)'
				}
			};
			var radius = ['70%', '75%'];
			var option = {
				legend: {
					x : 'center',
					y : 'center',
					data:[]
				},
				series : [
					{
						type : 'pie',
						center : ['50%', '50%'],
						radius : radius,
						x:'60%', // for funnel
						itemStyle : labelFromatter,
						data : [
							{name:'other', value:60, itemStyle : labelBottom},
							{name:'动力设备电耗', value:40,itemStyle : labelTop}
	            				]
	          			}
	        		]
	        	};
			energy33.setOption(option); 
		}
	);
	// 全年节能环形图（3）
	require(
		[
			'echarts',
			'echarts/chart/pie'
		],
		function (pie) {
			var energy33 = pie.init(document.getElementById('energy333')); 
			var labelTop = {
				normal : {
					color: '#FF7F50',
					label : {
						show : false,
						position : 'center',
						formatter : '{b}',
						textStyle: {
							baseline : 'top',
							color: '#7e7e7e',
							fontSize: 10
						}
					},
					labelLine : {
						show : false
					}
				}
			};
			var labelFromatter = {
				normal : {
					label : {
						formatter : function (params){
							return 100 - params.value + '%'
						},
						textStyle: {
							baseline : 'bottom',
							fontSize: 30,
							color: '#676A6C'
						}
					}
				},
			}
			var labelBottom = {
				normal : {
					color: '#eee',
					label : {
						show : true,
						position : 'center'
					},
					labelLine : {
						show : false
					}
				},
				emphasis: {
					color: 'rgba(0,0,0,0)'
				}
			};
			var radius = ['70%', '75%'];
			var option = {
				legend: {
					x : 'center',
					y : 'center',
					data:[]
				},
				series : [
					{
						type : 'pie',
						center : ['50%', '50%'],
						radius : radius,
						x:'60%', // for funnel
						itemStyle : labelFromatter,
						data : [
							{name:'other', value:80, itemStyle : labelBottom},
							{name:'公共照明及其他电耗', value:20,itemStyle : labelTop}
	            				]
	          			}
	        		]
	        	};
			energy33.setOption(option); 
		}
	);
</script>